<template>
    <div class="ch">
       <div class="content-header">
        <div class="content-header-top">
            <div class="content-header-left">
                <div>
                    <span class="content-header-left-score">{{this.infos[0].points}}</span>
                    <span class="content-header-left-fen">分</span>
                    <span class="content-header-left-desc">{{this.infos[0].comment}}</span>
                </div>
                <div>
                   <span class="content-header-left-comment">{{this.infos[0].commentNum}}条评论</span>
                    <span class="content-header-left-comment">{{this.infos[0].strategy}}条攻略</span>
                    <span class="iconfont icon-right"></span>
                </div>
            </div>
            <div class="content-header-right">
                <div class="content-header-right-title">景点简介</div>
                <span class="content-header-right-text">开放时间、贴士</span>
                <span class="iconfont icon-right"></span>
            </div>
        </div>
        <div class="content-header-bottom">
            <span class="iconfont icon-dibiao"></span>
            <span class="content-header-bottom-text">{{this.infos[0].site}}</span>
            <span class="iconfont icon-right"></span>
        </div>
       </div>
       <div class="content-center" >
            <h3 class="content-center-title">去哪儿推荐</h3>
            <div class="content-center-contents" v-for="(ticket,index) of tickets" :key="index">
                <div class="content-center-contents-one">
                    <div class="content-center-left">
                        <h5 class="content-center-left-title">{{ticket.title}}</h5>
                        <ul class="content-center-left-light">{{ticket.ding}}</ul>
                        <ul class="content-center-left-labelIcon" v-for="items of ticket.labels" :key="items">
                            <li>{{items}}</li>
                        </ul>
                    </div>
                    <div class="content-center-right">
                        <div>
                            <strong class="content-center-right-price">
                                ￥
                                <em class="content-center-right-priceN">{{ticket.price}}</em>
                            </strong>
                        </div>
                        <em class="content-center-right-ding">立即预定</em>
                    </div>
                </div>
            </div>

       </div>
    </div>
</template>

<script>
    export default {
        name: 'DetailContent',
        props: {
            infos: Array,
            tickets: Array
        }
    }
</script>

<style lang="stylus" scoped>
    .content-header
        // 这里直接relative就行，不需要absolute
        position: relative
        top: -.1rem
        height: 2.1rem
        width: 100%
        background: #fff
        border-radius: .15rem .15rem 0 0
        padding: .1rem 0
        .content-header-top
            display:flex
            height: 1.5rem
            justify-content: center
            align-items: center
            font-size: .35rem
            line-height: .44rem;
            .content-header-left
                flex: 1
                padding: 0 0 0 .2rem
                position: relative
                .content-header-left-score
                    color: #ff8300
                    font-size: .44rem
                    line-height: .44rem
                .content-header-left-fen
                    color: #ff8300
                    font-size: .28rem
                    line-height: .48rem
                .content-header-left-desc
                    color: #ff8300
                    font-size: .28rem
                    line-height: .48rem
                    margin-left: .1rem
                .icon-right
                    position: absolute
                    top: .3rem
                    right: .2rem
                .content-header-left-comment
                    color: #9e9e9e
                    font-size: .2rem

            .content-header-right
                flex: 1
                padding: 0 0 0 .2rem
                position: relative
                .icon-right
                    position: absolute
                    top: .3rem
                    right: .2rem
                .content-header-right-title
                    font-size: .28rem
                .content-header-right-text
                    font-size: .24rem
                    color: #9e9e9e
        .content-header-bottom
            display: block;
            position: relative;
            color: #212121
            padding: .1rem .1rem
            .icon-right
                position: absolute
                top: .1rem
                right: .2rem
    .content-center
        height: 6rem
        background: #fff
        margin: .2rem 0 .2rem 0
        padding: .25rem
        .content-center-title
            overflow: hidden;
            position: relative;
            z-index: 4;
            // background: #aaa;
            color: #212121;
            font-size: .4rem;
            line-height: .5rem;
            font-weight: bold;
            padding: 0.2rem 0 0 0.04rem
        .content-center-contents
            background: #f8f8f8;
            padding: 0 0.4rem;
            margin: 0.32rem 0 0.2rem;
            border-radius: 0.16rem;
            .content-center-contents-one
                display: flex
                box-sizing: border-box;
                padding: 0.3rem 0;
                position: relative;
                .content-center-left
                    flex: 3
                    .content-center-left-title
                        font-size: .3rem
                        margin: .1rem 0
                    .content-center-left-light
                        display: inline-block;
                        height: 0.32rem;
                        color: #00afc7;
                        font-size: .24rem;
                        line-height: .32rem;
                        white-space: nowrap;
                    .content-center-left-labelIcon li
                        float: left
                        margin-right: .1rem
                        display: inline-block;
                        margin-top: 0.08rem;
                        padding: 0.03rem 0.04rem;
                        height: 0.28rem;
                        color: #00afc7;
                        font-size: .2rem;
                        line-height: .28rem;
                        white-space: nowrap;
                        border: 0.01rem solid #00afc0
                .content-center-right
                    display: flex
                    flex: 1
                    flex-direction: column
                    justify-content: center
                    align-items: center
                    .content-center-right-price
                        color: #ff8300
                        font-size: .4rem;
                    .content-center-right-ding
                        height: 0.52rem;
                        margin-top: 0.12rem;
                        color: #fff;
                        font-size: .24rem;
                        text-align: center
                        padding: .05rem .2rem
                        line-height: .52rem;
                        border-radius: .4rem
                        background-image: linear-gradient(145deg,#ffab1e 0,#ff8c12 100%);
</style>
